<template>
  <div>
    <!-- 商品头部 -->
    <div class="goodHead">
      <ul>
        <li>
          <a href="#" @click="backFn">
            <i class="bi bi-chevron-left"></i>
          </a>
        </li>
        <li :class="{ active: num == 0 }" @click="num = 0">
          <a href="#">
            <span>商品</span>
          </a>
        </li>
        <li :class="{ active: num == 1 }" @click="num = 1">
          <a href="#">
            <span>评价</span>
          </a>
        </li>
        <li :class="{ active: num == 2 }" @click="num = 2">
          <a href="#">
            <span>推荐</span>
          </a>
        </li>
        <li :class="{ active: num == 3 }" @click="num = 3">
          <a href="#">
            <span>详情</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 商品信息 -->
    <produ-info></produ-info>
    <!-- 用户评价 -->
    <evaluation></evaluation>
    <!-- 优品推荐 -->
    <recommend></recommend>
    <!-- 产品介绍 -->
    <introduct></introduct>
    <!-- 加入购物车 -->
    <shop-cart></shop-cart>
  </div>
</template>

<script>
import produInfo from "./produInfo/productInfo.vue";
import evaluation from "./evaluation/evaluation.vue";
import recommend from "./recommend/recommend.vue";
import introduct from "./introduct/introduct.vue";
import shopCart from "./shopcart/shop-cart.vue";

import { get } from "@/utils/http";
import { mapState } from "vuex";

export default {
  data() {
    return {
      num: 0,
    };
  },
  computed: {
    ...mapState(["commod"]),
  },
  components: {
    produInfo,
    evaluation,
    recommend,
    introduct,
    shopCart,
  },
  methods: {
    backFn() {
      this.$router.go(-1);
    },
    init(data) {
      get(`http://47.115.51.185/api/product/detail/${data}`).then(
        (response) => {
          let res = response.data.data;
          // console.log(res,222);
          let arr = [];
          let obj = {};
          obj.goodlist = res.good_list;
          obj.storeInfo = res.storeInfo;
          obj.similarity = res.similarity;
          obj.productValue = res.productValue;
          arr.push(obj);
          this.$store.dispatch("commod/setcommodListAsync", arr);
          // console.log( this.$store.state.commod.commodList[0].goodlist);
          // console.log( this.$store.state.commod.commodList[0].storeInfo );
        }
      );
    },
  },
  // created() {
  //   this.init();
  //   console.log(this.$route.query.id);
  // },
  mounted() {
    let count = this.$route.query.id;
    this.init(count);
  },
};
</script>

<style lang="less">
@import "../assets/css/reset.css";
@import "../assets/less/variable.less";

.goodHead {
  width: 100%;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  ul {
    display: flex;
    li {
      width: 40px;
      height: 45px;
      line-height: 50px;
      margin-left: 30px;
      text-align: center;
      font-size: 16px;
      &:first-child {
        margin-left: 2px;
      }
      i {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .active {
      border-bottom: 3px solid #916dd5;
    }
  }
}
</style>